<template>
<mobile-tear-sheet>

  <mu-appbar :title="kcmc">
    <mu-flat-button @click="save" label="提交" slot="right"/>
    <mu-icon-menu icon="expand_more" slot="left" @change="handleChange" :value="kcmc">
    <mu-menu-item value="模拟电子技术" title="模拟电子技术" />
    <mu-menu-item value="机械基础" title="机械基础" />
    <mu-menu-item value="电脑拆机" title="电脑拆机" />
    <mu-menu-item value="全民斗地主" title="全民斗地主" />
  </mu-icon-menu>

  </mu-appbar>
    <mu-toast v-if="toast" message="保存成功" @close="hideToast"/>
  <mu-list>
    <mu-list-item title="课程详情"  toggleNested :open="false">
      <mu-icon slot="left" value="assignmentind" color="blue" />
      <mu-list-item title="时间：2017年4月10日" slot="nested">
         <mu-icon slot="left" value="alarm"  color="orange700"/>
      </mu-list-item>
      <mu-list-item title="周次：第2周" slot="nested" inset>
       <mu-icon slot="left" value="event" color="blueGrey500"/>
      </mu-list-item>
      <mu-list-item  title="星期2 -第3-4节" slot="nested" inset>
        <mu-icon slot="left" value="book" color="blueGrey500"/>
      </mu-list-item>
      <mu-list-item  title="授课地点：1号教学楼" slot="nested" inset>
        <mu-icon slot="left" value="room" color="green500"/>
      </mu-list-item>
    </mu-list-item>
  </mu-list>
  <mu-divider />
  <mu-list>
      <mu-sub-header>课堂日志 </mu-sub-header>
        <mu-divider />
            <mu-list-item >
            <mu-icon  value="alarm"  color="blue"/>
            <mu-time-picker hintText="到达时间" />
           <br/>
            <mu-icon value="alarm"  color="blue"/>
            <mu-time-picker hintText="离开时间" />
          </mu-list-item>
      <mu-divider />
      <mu-list-item  :title="'讲授时长:'+timeLong+'分钟'">
       <mu-icon slot="left" value="alarm"  color="blue"/>
      </mu-list-item>
      <div class="mu-list-item-zzg">
        <mu-slider v-model="timeLong" :step="1" :max="45" class="demo-slider"/>
      </div>
      <mu-divider />
      <mu-list-item disableRipple @click="handleToggle('events')" title="正常出勤">
        <mu-switch v-model="events"  slot="right"/>
         <mu-icon slot="left" value="alarm_on"  color="green500"/>
      </mu-list-item>
      <mu-divider />
      <mu-list-item disableRipple @click="handleToggle('calls')" title="布置作业">
        <mu-icon slot="left" value="note_add"  color="green500"/>
        <mu-switch v-model="calls" slot="right"/>
      </mu-list-item>
      <mu-divider />
      <mu-list-item disableRipple @click="handleToggle('messages')" title="已考勤">
        <mu-icon slot="left" value="assignment_turned_in"  color="green500"/>
        <mu-switch v-model="messages" slot="right"/>
      </mu-list-item>
      
    </mu-list>
  </mobile-tear-sheet>
</template>
<script>

export default {
  name:'ClassLog',
  data () {
    return {
      timeLong:0,
      events: false,
      calls: false,
      messages: false,
      notifications: false,
      sounds: false,
      videoSounds: false,
       bottomSheet: false,
       toast:false,
       kcmc:'模拟电子技术'
    }
  },
  methods: {
     handleChange (val) {
      this.kcmc = val;
    }, 
    handleToggle (key) {
      this[key] = !this[key]
    },
    closeBottomSheet () {
      this.bottomSheet = false
    },
    openBottomSheet () {
      this.bottomSheet = true
    },save(){
      this.toast = true
      if (this.toastTimer) clearTimeout(this.toastTimer)
      this.toastTimer = setTimeout(() => { this.toast = false }, 1000)
    }
  }
 
}
</script>
<style>
  .mu-sub-header{
    font-size:20px;
    background-color:whitesmoke;
  }
  .topSelectBtn{
    background-color: blue;
    color:white;
  }
  .mu-list-item-zzg{
    padding:20px;
  }
  
</style>